frontend/pages/e/[uuid]/prices.tsx (view raw)
1import {PropsWithChildren} from 'react';
2import {
3 EventByUuidDocument,
4 Module,
5 ModuleDocument,
6 Enum_Userspermissionsuser_Lang as SupportedLocales,
7} from '../../../generated/graphql';
8import EventLayout, {TabComponent} from '../../../layouts/Event';
9import useEventStore from '../../../stores/useEventStore';
10import {Box, Container, Paper, useTheme} from '@mui/material';
11import Head from 'next/head';
12import {getSession, useSession} from 'next-auth/react';
13import pageUtils from '../../../lib/pageUtils';
14import {getLocaleForLang} from '../../../lib/getLocale';
15
16interface Props {
17 modulesSettings?: Module;
18 eventUUID: string;
19 announcement?: string;
20}
21
22const Page = (props: PropsWithChildren<Props>) => {
23 return <EventLayout {...props} Tab={PricesPage} />;
24};
25
26const PricesPage: TabComponent<Props> = ({modulesSettings}) => {
27 const theme = useTheme();
28 const event = useEventStore(s => s.event);
29 const session = useSession();
30 const profile = session?.data?.profile;
31
32 const carosterPlusActivated =
33 modulesSettings?.caroster_plus_enabled &&
34 event?.enabled_modules?.includes('caroster-plus');
35
36 if (!event && !carosterPlusActivated) return null;
37
38 return (
39 <Box position="relative">
40 <Head>
41 <script async src="https://js.stripe.com/v3/pricing-table.js"></script>
42 </Head>
43 <Container
44 sx={{
45 p: 4,
46 mt: 6,
47 mb: 11,
48 mx: 0,
49 [theme.breakpoints.down('md')]: {
50 p: 2,
51 mt: 13,
52 },
53 }}
54 >
55 <Box mb={4}>
56 {/* @ts-ignore */}
57 <stripe-pricing-table
58 pricing-table-id={modulesSettings.caroster_plus_pricing_grid_id}
59 publishable-key={modulesSettings.caroster_plus_publishable_key}
60 client-reference-id={event.uuid}
61 customer-email={profile?.email}
62 />
63 </Box>
64 </Container>
65 </Box>
66 );
67};
68
69export const getServerSideProps = pageUtils.getServerSideProps(
70 async (context, apolloClient) => {
71 const {uuid} = context.query;
72 const {host = ''} = context.req.headers;
73 let event = null;
74 let modulesSettings = null;
75
76 const session = await getSession(context);
77 if (!session)
78 return {
79 redirect: {
80 destination: `/auth/login?redirectPath=${context.resolvedUrl}`,
81 permanent: false,
82 },
83 };
84
85 // Fetch event
86 try {
87 const {data} = await apolloClient.query({
88 query: EventByUuidDocument,
89 variables: {uuid},
90 });
91 event = data?.eventByUUID?.data;
92 } catch (error) {
93 return {
94 notFound: true,
95 };
96 }
97
98 // Fetch module settings
99 try {
100 const {data} = await apolloClient.query({
101 query: ModuleDocument,
102 variables: {locale: context.locale},
103 });
104 modulesSettings = data?.module?.data?.attributes || {};
105
106 if (!modulesSettings?.caroster_plus_pricing_grid_id) {
107 console.warn(
108 'Module settings are not set for locale: ',
109 context.locale,
110 ' fallback to English'
111 );
112 const {data: enData} = await apolloClient.query({
113 query: ModuleDocument,
114 variables: {locale: SupportedLocales['en']},
115 });
116 modulesSettings = enData?.module?.data?.attributes;
117 }
118 } catch (error) {
119 console.error("Can't fetch config for module: ", error);
120 }
121
122 const description = await getLocaleForLang(
123 event?.attributes?.lang,
124 'meta.description'
125 );
126
127 return {
128 props: {
129 modulesSettings,
130 eventUUID: uuid,
131 metas: {
132 title: event?.attributes?.name || '',
133 description,
134 url: `https://${host}${context.resolvedUrl}`,
135 },
136 },
137 };
138 }
139);
140
141export default Page;